<script setup lang="ts">
import { nextTick, reactive } from 'vue'
// 文字竖向轮播部分
// reactive() 创建响应式对象，所有属性变化都会触发视图更新
const state = reactive({
  stop: false,// 控制滚动是否暂停
  scrollValue: 0,// 当前滚动位置
  // 循环渲染文字
  testList: [
    '原创设计，正版保障，商用0风险',
    '职场、教育、医疗……100+热门行业场景',
    '模板、图表、图片……全品类PPT资源'
  ]
})
// 文字滚动
function scrollText() {
  // 只有不在暂停状态时才执行滚动
  if (!state.stop) {
    // 滚动到最后一项时，重置到第一项
    if (state.scrollValue >= (state.testList.length - 1) * 25) {
      state.scrollValue = 0
    } else {
      state.scrollValue += 25
    }
    // 从最后回到第一项时，只延迟100ms
    if (state.scrollValue === 0) {
      delayedScrolling(100)
    } else {
      delayedScrolling(3000)
    }
  } else {
    // 如果处于暂停状态，3秒后再检查
    delayedScrolling(3000)
  }
}
// 延迟滚动
let scrollTimeout: number | null | undefined = null
const delayedScrolling = (timeout = 3000) => {
  if (scrollTimeout) clearTimeout(scrollTimeout)

  scrollTimeout = setTimeout(() => {
    scrollText()
  }, timeout)
}

onMounted(() => {
  const params = state.testList[0]
  if (state.testList.length > 1) {
    // 把第一项添加到末尾
    state.testList.push(params)
  }
  delayedScrolling(3000)
})
onUnmounted(() => {
  if (scrollTimeout) clearTimeout(scrollTimeout)
})
// 懒加载图片
import { ref, onMounted, onUnmounted } from 'vue'
const containerRef = ref<HTMLElement | null>(null)
// api
const observer = ref<IntersectionObserver | null>(null)
const initObserver = () => {
  // 创建实例
  observer.value = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target as HTMLImageElement
        loadImage(img)
        observer.value?.unobserve(img) // 停止观察该图片
      }
    })
  }, {
    rootMargin: '100px', // 提前 100px 加载图片
    threshold: 0.01, // 元素有 1% 进入视口时触发回调
  })
  const images = containerRef.value?.querySelectorAll('img[data-src]');
  images?.forEach((img) => {
    observer.value?.observe(img)
  })
}
// 实际图片
const loadImage = (img: HTMLImageElement) => {
  const dataSrc = img.dataset.src
  if (dataSrc && img.src !== dataSrc) {
    img.src = dataSrc
    img.onload = () => {
      img.style.opacity = '1'
      // 使用 nextTick 确保 DOM 更新后再添加样式
      nextTick(() => {
        img.style.cursor = "pointer"
        img.style.transition = "transform 0.3s ease"
        img.addEventListener("mouseenter", () => {
          img.style.transform = "scale(1.1)"
        })
        img.addEventListener("mouseleave", () => {
          img.style.transform = "scale(1)"
        })
      })
    }
    img.style.transition = 'opacity 0.3s ease'
    img.style.opacity = '0'
  }
}
onMounted(() => {
  initObserver()
})
onUnmounted(() => {
  observer.value?.disconnect()
})
// 页面滑动动画效果
import ScrollWrapper from './ScrollWrapper .vue'; 
</script>

<template>
  <div class="slidePPT">
    <ScrollWrapper>
      <div>
        <div class="pptText">
          <span>14,000,000+</span>PPT 模板 / 素材
        </div>
        <div class="slideUl">
          <ul>
            <li class="slideUlLi" :style="{
              transform: `translateY(${-state.scrollValue}px)`,
              transition: state.scrollValue === 0 ? `none 0s` : `all 1.5s ease-in-out`
            }" v-for="(item, index) in state.testList" :key="index"> {{ item }}
            </li>
          </ul>
        </div>
        <div class="temp" ref="containerRef">
          <div class="top">
            <ul class="ulTop1">
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top1.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top2.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top3.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top4.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top5.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top6.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top7.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top8.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top9.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top10.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top11.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top12.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top13.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top14.png"></li>
            </ul>
            <ul class="ulTop2">
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top1.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top2.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top3.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top4.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top5.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top6.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top7.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top8.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top9.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top10.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top11.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top12.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top13.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureTop/top14.png"></li>
            </ul>
          </div>
          <div class="middle">
            <ul class="ulMiddle1">
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle1.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle2.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle3.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle4.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle5.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle6.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle7.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle8.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle9.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle10.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle11.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle12.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle13.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle14.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle15.png"></li>
            </ul>
            <ul class="ulMiddle2">
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle1.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle2.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle3.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle4.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle5.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle6.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle7.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle8.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle9.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle10.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle11.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle12.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle13.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle14.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureMiddle/middle15.png"></li>
            </ul>
          </div>
          <div class="end">
            <ul class="ulEnd1">
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end1.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end2.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end3.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end4.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end5.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end6.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end7.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end8.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end9.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end10.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end11.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end12.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end13.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end14.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end15.png"></li>
            </ul>
            <ul class="ulEnd2">
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end1.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end2.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end3.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end4.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end5.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end6.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end7.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end8.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end9.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end10.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end11.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end12.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end13.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end14.png"></li>
              <li><img src="/images/templatesAndMaterials/pictureTop/top1.png"
                  data-src="/images/templatesAndMaterials/pictureEnd/end15.png"></li>
            </ul>
          </div>
        </div>
      </div>
    </ScrollWrapper>
  </div>
</template>

<style scoped lang="less">
// 轮播文字
.slidePPT {
  position: relative;
  width: 100%;
  min-width: 1300px;
  overflow: hidden;
  color: #fff;
  padding-bottom: 100px;
  background: linear-gradient(#000, rgb(37, 15, 51)30%, rgb(74, 38, 128) 50%, rgb(74, 38, 128) 80%, #000);

  &::before {
    display: block;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 10;
    pointer-events: none;
    background: linear-gradient(to right, #000, rgba(34, 47, 64, .2) 15%, transparent 20%, transparent 50%, transparent 80%, rgba(34, 47, 64, .2) 85%, #000);
  }

  .pptText {
    width: 800px;
    margin: 0 auto;
    margin-top: 80px;
    font-size: 60px;

    span {
      background-image: linear-gradient(to right, rgb(82, 161, 255), rgb(128, 77, 255), rgb(202, 90, 255));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

}

.slideUl {
  margin: 0 auto;
  width: 1300px;
  height: 25px;
  text-align: center;
  font-size: 18px;
  color: rgb(195, 191, 198);
  margin-top: 20px;
  margin-bottom: 50px;

  ul {
    overflow: hidden;
    width: 450px;
    height: 25px;
    line-height: 25px;
    margin: 0 auto;
  }

  .slideUlLi {
    width: 100%;
    height: 100%;
    line-height: 25px;
  }
}

// 轮播图片
.temp {
  width: 100%;

  div {
    margin: 20px 0;
  }
}

.top,
.middle,
.end {
  display: flex;
  overflow: hidden;
}

.ulTop1,
.ulTop2,
.ulMiddle1,
.ulMiddle2,
.ulEnd1,
.ulEnd2 {
  width: 7400px;
  display: flex;
  flex-wrap: nowrap;

  li {
    width: 456px;
    min-width: 456px;
    transition: all .3s linear;
    margin: 0 15.5px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    z-index: 4;

    img {
      width: 100%;
      display: block;
      overflow: hidden;
    }
  }
}

.ulTop1,
.ulEnd1 {
  animation: slideOne 100s linear 0s infinite;
}

.ulMiddle1 {
  animation: slideThree 100s linear 0s infinite;
}

.ulTop2,
.ulEnd2 {
  animation: slideTwo 100s linear 0s infinite;
}

.ulMiddle2 {
  animation: slideFour 100s linear 0s infinite;
}

@keyframes slideOne {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-100%, 0);
    animation-timing-function: step-end;
  }

  50.7% {
    transform: translate(98%, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes slideTwo {
  0% {
    transform: translate(0, 0);
  }

  99.9% {
    transform: translate(-200%, 0);
    animation-timing-function: step-end;
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes slideThree {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(100%, 0);
    animation-timing-function: step-end;
  }

  50.7% {
    transform: translate(-98%, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes slideFour {
  0% {
    transform: translate(-200%, 0);
  }

  99.7% {
    transform: translate(0, 0);
    animation-timing-function: step-end;
  }

  100% {
    transform: translate(0, 0);
  }
}
</style>